<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title></title>
  <link rel="stylesheet" type="text/css" href="css/iconfont.css">
<!--   <link rel="stylesheet" type="text/css" href="css/iconfont.css"> -->
	<style type="text/css">
     .wrapper{
     	width: 600px;
     	height: 700px;
     	border: 5px double green;
      margin: 100px;
  
     }
     .header{
     	text-align: center;
     	background: black;
      color: #fff;
      border-bottom-right-radius: 15px;
      border-bottom-left-radius: 15px;

     }
     .header h2{
      margin: 0;
      height:60px;
      line-height: 60px;
      position: relative;
     }
     .item button{
      background-color: red;
      color: #fff;
      border: none;
      height: 40px;
      line-height: 40px;
      margin: 20px 10px;
      border-radius: 5px;

     }


	</style>
</head>
<body>
    <div class="wrapper">
       <div class="header">
          <h2>
             <span class="iconfont icon-fanhui" style="position:absolute; top:0; right:15px; color:#fff"></span>请选择省份
          </h2>
          <div class="fanhui"><em></em></div>
       </div>

       <div class="province item">
          <button>广西壮族自治区</button>
          <button>云南省</button>
          <button>广东省</button>
       </div>
       <div class="city item" style="position:absolute;left:713px; top: 100px; width:400px;height: 450px; border: 5px double green;display:none">
            <button>来宾</button>
            <button>柳州</button>
            <button>河池</button>
       </div>
       <div class="area item" style="position:absolute;left:1118px; top: 100px; width:200px;height: 200px; border: 5px double green;display:none">
            <button>象州县</button>
            <button>武宣县</button>
            <button>金秀瑶族自治县</button>
       </div>
    </div>


<script type="text/javascript" src="js/jquery3.js"></script>
<script type="text/javascript">
  $('.icon-fanhui').click(function(){
       $('.item').each(function(){
        if($(this).css('display')=='block'){

          var i = $(this).index()-1;
          console.log("i" +i);
          if(i>-1){
            $('.item').hide();
            $('.item:eq('+i+')').show();
                 }
           
         console.log($(this).index());
             }
         });
     });
     
   function showarea(btn){
      var cid=$(btn).val();
     
      $('.province').show();
      $('.area').show();
      $('.city').show();

      $('.area').empty();
      $.get('json/area.json',function(res){
       
        for (var i = 0;i<res.length;i++){
          
          if(cid==res[i].pid){
          var btn='<button  value="'+res[i].id+'">'+res[i].name+'</button>';
          $('.area').append(btn);
       
          }
        }     
      })
    }


    function showcity(btn){
      var pid=$(btn).val();
     
      $('.province').show();
      $('.area').hide();
      $('.city').show();
       
      $.get('json/city.json',function(res){
        $('.city').empty();
        for (var i = 0;i<res.length;i++){
          
          if(pid==res[i].pid){
          var btn='<button onclick="showarea(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
          $('.city').append(btn);
       
          }
        }     
      });

    }


    function InitProvince(){

      $('.province').empty();

      $.get('json/province.json',function(res){

        for (var i = 0;i<res.length;i++){
          var btn='';
          btn='<button onclick="showcity(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
          $('.province').append(btn);
        }     
      });
    };

    InitProvince();

</script>
</body>
</html>